<template>
    <view>
        <view class="s-head">
            <uni-card
                    :title="city"
                    :is-shadow="true"
                    :extra="extra"
                    shadow="true"
            >
                <view>
                    <text class="text">23℃</text>
                </view>
                <view>
                    <img src="@/static/baidu/yin.png">
                    <text class="text">多云</text>
                </view>
                <view>
                    <text class="text">西南风二级</text>
                </view>


            </uni-card>
        </view>
        <view class="content">

            <text>两小时后会有小雨，50分钟后停止</text>


        </view>


        <view class="uni-padding-wrap uni-common-mt">
            <text>24小时预报</text>
            <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
                <view v-for="item in list" class="scroll-view-item_H">
                    <view>{{item}}时</view>
                    <view><img src="@/static/baidu/lei.png"></view>
                    <view>23℃</view>
                </view>
            </scroll-view>
        </view>

        <view class="seven-weather">
            <text>7天预报</text>
            <view class="">
                <uni-grid :column="7" :show-border="false"  :square="false">
                    <uni-grid-item class="s-item">
                        <text class="text">06/25</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <text class="text">06/26</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <text class="text">06/27</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <text class="text">06/28</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <text class="text">06/29</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <text class="text">06/30</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <text class="text">07/21</text>
                        <text class="text">周一</text>
                        <img src="@/static/baidu/wu.png">
                    </uni-grid-item>
                </uni-grid>
            </view>
            <view class="qiun-charts" >
                <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
            </view>
            <view class="">
                <uni-grid :column="7" :show-border="false"  :square="false">
                    <uni-grid-item class="s-item" >
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>
                    <uni-grid-item class="s-item">
                        <img src="@/static/baidu/wu.png">
                        <text class="text">南风</text>
                        <text class="text">1级</text>
                    </uni-grid-item>

                </uni-grid>
            </view>
        </view>
    </view>

</template>

<script>
    import uniCard from '@/components/uni-card/uni-card.vue'
    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
    import uCharts from '@/components/u-charts/u-charts.js';
    var _self;
    var canvaLineA=null;

    export default {
        components: {uniGrid, uniGridItem, uniCard},
        data() {
            return {
                list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                city: '北京',
                extra: '刚刚更新',
                cWidth:'',
                cHeight:'',
                pixelRatio:1
            }
        },
        onLoad() {
            _self = this;
            this.cWidth=uni.upx2px(750);
            this.cHeight=uni.upx2px(500);
            this.getServerData();
        },
        methods: {
            getServerData(){
                uni.request({
                    url: 'http://localhost:8080/static/data.json',
                    data:{
                    },
                    success: function(res) {
                        console.log(res.data.data)
                        let LineA={categories:[],series:[]};
                        //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
                        LineA.categories=res.data.data.LineA.categories;
                        LineA.series=res.data.data.LineA.series;
                        _self.showLineA("canvasLineA",LineA);
                    },
                    fail: () => {
                        _self.tips="网络错误，小程序端请检查合法域名";
                    },
                });
            },
            showLineA(canvasId,chartData){
                canvaLineA=new uCharts({
                    $this:_self,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize:11,
                    legend:{show:false},
                    dataLabel:true,
                    dataPointShape:true,
                    background:'#FFFFFF',
                    pixelRatio:_self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    xAxis: {
                        disabled:true,
                        disableGrid:true,
                        axisLine:false
                    },
                    yAxis: {
                        disabled:true,
                        disableGrid:true
                    },
                    width: _self.cWidth*_self.pixelRatio,
                    height: _self.cHeight*_self.pixelRatio,
                    extra: {
                        line:{
                            type: 'curve'
                        },
                        tooltip: {
                            showBox: false,
                            xAxisLabel:false,
                            yAxisLabel:false
                        }
                    }
                });


            },
            touchLineA(e) {
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            }
        }
    };
</script>

<style>


    .s-head {

    }

    .content {
        margin: 12px;
    }

    .uni-padding-wrap{
        margin: 12px;
    }
    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }

    .scroll-view-item_H {
        display: inline-block;
        height: 300 upx;
        line-height: 300 upx;
        text-align: center;
        font-size: 36 upx;
    }

    .qiun-charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }

    .charts {
        width: 100%;
        height: 500upx;
        background-color: #FFFFFF;
    }
    .seven-weather{
        margin: 12px;
    }
    /**让图表和上面的文字对齐*/
    canvas {
        left: -12px;
    }
</style>
